﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery跟随鼠标滑入方向感知-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style>
* {
	margin:0;
}
li {
	list-style:none;
}
.list {
	width:1200px;
	margin:100px auto;
}
.list li {
	float:left;
	width:240px;
	height:240px;
	position:relative;
	overflow:hidden;
}
.list li img {
	width:100%;
	height:100%;
	display:block;
	transition:all 1s;
}
.list li .mask {
	background:rgba(255,255,255,0.6);
	position:absolute;
	left:-1000px;
	top:-1000px;
	width:100%;
	height:100%;
	box-sizing:border-box;
	padding:0 30px;
	padding-top:30px;
	color:#003eff;
}
.list li:hover img {
	transform:scale(1.5);
}
</style>
</head>
<body>
<ul class="list">
    <li>
        <img src="http://www.jq22.com/img/cs/500x500-1.png">
        <div class="mask">电器产品电器产品电器产品电器产品电器产品电器产品</div>
    </li>
    <li>
        <img src="http://www.jq22.com/img/cs/500x500-2.png">
        <div class="mask">著名品牌著名品牌著名品牌著名品牌著名品牌著名品牌</div>
    </li>
    <li>
        <img src="http://www.jq22.com/img/cs/500x500-6.png">
        <div class="mask">防辐射防辐射防辐射防辐射防辐射防辐射防辐射防辐射</div>
    </li>
    <li>
        <img src="http://www.jq22.com/img/cs/500x500-4.png">
        <div class="mask">零食零食零食零食零食零食零食零食零食零食零食零食</div>
    </li>
    <li>
        <img src="http://www.jq22.com/img/cs/500x500-5.png">
        <div class="mask">奶制品奶制品奶制品奶制品奶制品奶制品奶制品奶制品</div>
    </li>
</ul>

<script>
(function($) {
    $(function() {
        $(".list li").bind("mouseenter mouseleave", function(e) {
            var w = $(this).width();
            var h = $(this).height();
            var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
            var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
            var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
            var eventType = e.type;
            var dirName = new Array('上方', '右侧', '下方', '左侧');
            let mask = $(this).children('.mask');
            if (e.type == 'mouseenter') {
                switch (direction) {
                    case 0:
                        mask.css({
                            top: -240,
                            left: 0
                        });
                        break;
                    case 1:
                        mask.css({
                            top: 0,
                            left: 240
                        });
                        break;
                    case 2:
                        mask.css({
                            top: 240,
                            left: 0
                        });
                        break;
                    case 3:
                        mask.css({
                            top: 0,
                            left: -240
                        });
                        break;
                }
                mask.stop(true).animate({
                    left: 0,
                    top: 0
                }, 400);
            } else {
                let end = {};
                switch (direction) {
                    case 0:
                        end = {
                            top: -240,
                            left: 0
                        };
                        break;
                    case 1:
                        end = {
                            top: 0,
                            left: 240
                        };
                        break;
                    case 2:
                        end = {
                            top: 240,
                            left: 0
                        };
                        break;
                    case 3:
                        {
                            end = {
                                top: 0,
                                left: -240
                            };
                            break;
                        }
                }
                mask.stop(true).animate(end, 400);
            }
        });
    });
})(jQuery);
</script>

</body>
</html>
